<!--
 作者 : 唐梓元
 日期 : 2019-7-8
 版本 : 1.0
 描述 :热门关键词组件
 使用 : <home-hotKeyword :keywordList="keywordList"></home-hotKeyword>
 参数 :keywordList 为父组件传过来的值
 -->
<template>
  <div >
    <div class="f contentLi" v-for="(item,index) in keywordList" :key="index" v-if="index<9&&keywordList" >
      <div class="flex1 f"><span class="relt"><img src="../../assets/Home/redu2019627.png" alt="" v-if="index<=2"> <span v-text="index+1" :class="index<=2?'colorWhite':''"></span></span> <span class="rightTitle" v-text="item.Name"></span></div>
      <div v-text="`${item.Number}次`"></div>
    </div>
    <div v-if="keywordList&&keywordList.length===0" class="noKeyWord f-zhong">
      暂无关键词！
    </div>
  </div>

</template>

<script>
    export default {
        name: "cm_home-hotKeyword",
      props:{
        keywordList:Array
      },
    watch:{
      keywordList(newV,oldV){
        newV.forEach((item)=>{
          if(item.KeyWord){
            this.$set(item,"Name",item.KeyWord)
          }
          if(item.QueryNumber){
            this.$set(item,"Number",item.QueryNumber)
          }
        })

      }
    }

    }
</script>

<style scoped>
 .contentLi{
    border-bottom: 1px dashed grey;
    padding-bottom: 10px;
    box-sizing: content-box;
    padding-top: 10px;
  }
 .contentLi:last-child{
   /*border: none;*/
 }

  .rightTitle{
    padding-left: 10px;
  }
  .contentLi .relt {
    height: 26px !important;
    width: 22px !important;
  }
  .contentLi .relt img{
    width: 22px;
    position: absolute;top: 0;
  }
  .contentLi div:last-child{
    color: #808080;
  }
  .contentLi .relt span{
    position: absolute;
    left: 7px;
    top: 2px;
    height: 20px;
    line-height: 20px;
    color: red;
    font-weight: 600;
  }
  .colorWhite{
    color: white !important;
  }
  .noKeyWord{
    min-height: 80px;
    color: grey;
  }
</style>
